<template>
  <div>
    <el-form ref="searchKey"
             :inline="true"
             :model="searchKey"
             :show-message="false"
             :inline-message="true"
             label-position="left"
             label-width="60px">
      <el-form-item label="发放月份" prop="beginTime" label-width="80px">
        <el-date-picker
          size="small"
          v-model="searchKey.beginTime"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月">
        </el-date-picker>
        <span style="margin-left: 10px;">-</span>
      </el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          size="small"
          v-model="searchKey.endTime"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="treeSelect" label="部门" prop="deptIds" label-width="50px">
        <tree-select v-model="searchKey.deptIds"
                     :multiple="true"
                     :flat="true"
                     :default-expand-level="1"
                     :options="departmentAllListData"
                     :normalizer="treeSelectProps"
                     placeholder="选择部门"
                     style="width: 350px;"/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'StatisticalSearch',
    mixins: [],
    components: {
      TreeSelect
    },
    data() {
      return {
        isShowFilter: false, // 是否显示搜索
        searchKey: {},
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children
            // isDefaultExpanded: true
          }
        }
      }
    },
    props: {
      initParams: { // 初始参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      departmentAllListData: {// 搜索参数
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      resetSearchData() { // 重置表单
        this.searchKey = {
          ...JSON.parse(JSON.stringify(this.initParams))
        }
      },
      handleFilter: debounce(function() { // 查询，防抖
        // this.searchKey.pageNum = 1
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleReset: debounce(function() { // 重置查询，防抖
        this.resetSearchData()
        this.$emit('on-init', this.searchKey)
      }, 300),
      async initData() { // 初始化数据
      }
    },
    watch: {
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .treeSelect {
    & /deep/ .vue-treeselect__multi-value {
      line-height: 20px;
    }
  }
</style>
